<template>
  <p class="mt12 mb12 f14">产品明细表</p>
  <el-table class="jzt-table" :data="tableData" :cell-class-name="setCellClassName" border style="width: 100%">
    <!-- :span-method="spanMethod" -->
    <el-table-column prop="firstCategoryName" fixed label="分类" width="100" />
    <el-table-column prop="lastCategoryName" label="分类" width="100" />
    <el-table-column prop="brandName" label="品牌" />
    <el-table-column prop="modeCode" label="型号" />
    <el-table-column prop="skuSpecification" show-overflow-tooltip label="商品规格" width="160">
      <template #default="{ row }">
        <span>{{ row.skuSpecification || "-" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="productUnit" label="单位">
      <template #default="{ row }">
        {{ useCodeArrStore().getDictName("shop_unit", row.productUnit) || "-" }}
      </template>
    </el-table-column>
    <el-table-column prop="productNum" label="数量">
      <template #default="{ row }">
        <p>{{ row.productNum }}</p>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="warrantyTime" label="质保日期(月)">
      <template #default="{ row }">
        <p>{{ row.warrantyTime || "-" }}</p>
      </template>
    </el-table-column> -->
    <el-table-column prop="remark" label="备注" width="280">
      <template #default="{ row }">
        <RemarkEditor v-model="row.remark" title="修改备注" :isEdit="true" @submit="updateCustomerSpaceQuotaFun(row)" />
      </template>
    </el-table-column>
    <el-table-column prop="" fixed="right" label="单价" width="150">
      <template #default="{ row }">
        <p class="jzt-flex-start" v-if="row.clientPrice && Number(row.clientPrice > 0)">
          <el-tag class="jzt-tag mr4" type="danger" effect="plain" size="small">正价</el-tag>
          <span>¥{{ row.clientPrice }}</span>
        </p>
        <p class="jzt-flex-start" v-if="row.clientPreferentialPrice && Number(row.clientPreferentialPrice) > 0">
          <el-tag class="jzt-tag mr4" type="warning" effect="plain" size="small">特价</el-tag>
          <span>¥{{ row.clientPreferentialPrice }}</span>
        </p>
      </template>
    </el-table-column>
    <el-table-column prop="totalMoney" fixed="right" width="120">
      <template #header>
        <span>小计</span>
        <p>(单价*数量)</p>
      </template>
      <template #default="{ row }">
        <p class="jzt-flex-start" v-if="row.totalClientPrice && Number(row.totalClientPrice > 0)">
          <span>¥{{ row.totalClientPrice }}</span>
        </p>
        <p class="jzt-flex-start" v-if="row.totalClientPreferentialPrice && Number(row.totalClientPreferentialPrice) > 0">
          <span>¥{{ row.totalClientPreferentialPrice }}</span>
        </p>
      </template>
    </el-table-column>
    <el-table-column prop="totalMoney" fixed="right" width="120">
      <template #header>
        <span>合计</span>
        <p>(含耗损等计算)</p>
      </template>
      <template #default="{ row }">
        <p>
          <span>¥{{ row.totalMoney || "--" }}</span>
        </p>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, computed } from "vue";
import RemarkEditor from "@/components/RemarkEditor";
import useCodeArrStore from "@/store/modules/select";
import { updateQuotaProductRemark } from "@/apis/quote-price/following";

const emits = defineEmits(["success"]);
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});
const _tableData = computed(() => props.tableData);

const updateCustomerSpaceQuotaFun = async (item, key, limit = { max: 999999 }) => {
  const { code } = await updateQuotaProductRemark({ ...item });
  code === 200 && emits("success", "修改成功", true);
};

const setCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    return "gray";
  }
};

const spanMethod = ({
  row, // 行
  column, // 列
  rowIndex, // 行索引
  columnIndex // 列索引
}) => {
  if (columnIndex === 0) {
    return setTableRowCol(row, rowIndex, ["id"]);
  }
};

/**
 * 合并行
 * @param {*} row
 * @param {*} rowIndex
 * @param {*} keys
 */
const setTableRowCol = (row, rowIndex, keys) => {
  let firstIndex = 0,
    rowspan = 1,
    colspan = 1;
  // 找到需要合并的行的下标
  firstIndex = _tableData.value.findIndex(item => {
    return filterSameKeys(item, row, keys);
  });
  if (rowIndex === firstIndex) {
    // 需要合并的行数
    rowspan = _tableData.value.filter(item => {
      return filterSameKeys(item, row, keys);
    }).length;
    colspan = 1;
  } else {
    // 被合并的行需要设置成0
    rowspan = 0;
    colspan = 0;
  }
  return {
    rowspan,
    colspan
  };
};
// 根据keys数组所有字段去做合并
const filterSameKeys = (item, row, keys) => {
  const _item = JSON.parse(JSON.stringify(item));
  let flag = true;
  keys.forEach(key => {
    flag = flag && _item[key] === row[key];
  });
  return flag;
};
</script>

<style lang="scss" scoped>
:deep(.gray.el-table__cell) {
  background-color: #ebeef1 !important;
}
</style>
